import React from 'react'
import axios from 'axios'
class List extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }
    componentDidMount() {
        axios.get('/api/list').then(res => {
            this.setState({
                data: res.data.data
            })
        })
    }
    render() {
        return <div>
            <div className="header">
                <span>排名</span>
                <span>名称</span>
                <span>人气榜</span>
                <span>口碑值</span>
            </div>
            {
                this.state.data.map((item, i) =>{
                    return <div key={i} onClick={() => this.props.history.push('/detail', {
                        id: item.id
                    })}>
                        <span>{i+1}</span>
                        <span>{item.name}</span>
                        <span>{item.hot}</span>
                        <span>{item.mark}</span>
                    </div>
                })
            }
        </div>
    }
}

export default List